import { defineComponent } from 'vue'
import { useInject } from '../hooks'
import type { ISvgIconProps } from '@/core'
export const AddFocus = defineComponent({
  setup() {
    const appConif = useInject()
    return () => (
      <svg
        width="24"
        height="24"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16 6H8C6.89543 6 6 6.89543 6 8V16"
          stroke={appConif.fontColor}
          stroke-width="4"
          stroke-linecap="butt"
          stroke-linejoin="round"
          fill-rule="evenodd"
        />
        <path
          d="M16 42H8C6.89543 42 6 41.1046 6 40V32"
          stroke={appConif.fontColor}
          stroke-width="4"
          stroke-linecap="butt"
          stroke-linejoin="round"
        />
        <path
          d="M32 42H40C41.1046 42 42 41.1046 42 40V32"
          stroke={appConif.fontColor}
          stroke-width="4"
          stroke-linecap="butt"
          stroke-linejoin="round"
        />
        <path
          d="M32 6H40C41.1046 6 42 6.89543 42 8V16"
          stroke={appConif.fontColor}
          stroke-width="4"
          stroke-linecap="butt"
          stroke-linejoin="round"
        />
        <path
          d="M32 24L16 24"
          stroke={appConif.fontColor}
          stroke-width="4"
          stroke-linecap="butt"
          stroke-linejoin="round"
        />
        <path
          d="M24 32L24 16"
          stroke={appConif.fontColor}
          stroke-width="4"
          stroke-linecap="butt"
          stroke-linejoin="round"
        />
      </svg>
    )
  },
})
export const Config = defineComponent({
  setup() {
    const appConif = useInject()
    return () => (
      <svg
        width="24"
        height="24"
        viewBox="0 0 48 48"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g>
          <rect
            width="48"
            height="48"
            fill="white"
            fill-opacity="0.01"
            stroke-linejoin="round"
            stroke-width="4"
            stroke="none"
            fill-rule="evenodd"
          />
          <g transform="translate(4.000000, 4.000000)">
            <polygon
              stroke={appConif.fontColor}
              fill="none"
              points="20 1.74860126e-15 14 6 6 6 6 14 1.74860126e-15 20 6 26 6 34 14 34 20 40 26 34 34 34 34 26 40 20 34 14 34 6 26 6"
              stroke-linejoin="round"
              stroke-width="4"
              fill-rule="nonzero"
            />
            <circle
              stroke={appConif.fontColor}
              fill="none"
              cx="20"
              cy="20"
              r="6"
              stroke-linejoin="round"
              stroke-width="4"
              fill-rule="nonzero"
            />
          </g>
        </g>
      </svg>
    )
  },
})

export const Abno = (props: ISvgIconProps) => {
  return (
    <svg
      width={props.iconSize}
      height={props.iconSize}
      viewBox="0 0 48 48"
      fill="none"
    >
      <path
        d="M16 6H8C6.89543 6 6 6.89543 6 8V16"
        stroke={props.colors[0]}
        stroke-width={props.strokeWidth}
        stroke-linecap={props.strokeLinecap}
        stroke-linejoin={props.strokeLinejoin}
      />
      <path
        d="M16 42H8C6.89543 42 6 41.1046 6 40V32"
        stroke={props.colors[0]}
        stroke-width={props.strokeWidth}
        stroke-linecap={props.strokeLinecap}
        stroke-linejoin={props.strokeLinejoin}
      />
      <path
        d="M32 42H40C41.1046 42 42 41.1046 42 40V32"
        stroke={props.colors[0]}
        stroke-width={props.strokeWidth}
        stroke-linecap={props.strokeLinecap}
        stroke-linejoin={props.strokeLinejoin}
      />
      <path
        d="M32 6H40C41.1046 6 42 6.89543 42 8V16"
        stroke={props.colors[0]}
        stroke-width={props.strokeWidth}
        stroke-linecap={props.strokeLinecap}
        stroke-linejoin={props.strokeLinejoin}
      />
      <path
        d="M32 24L16 24"
        stroke={props.colors[0]}
        stroke-width={props.strokeWidth}
        stroke-linecap={props.strokeLinecap}
        stroke-linejoin={props.strokeLinejoin}
      />
      <path
        d="M24 32L24 16"
        stroke={props.colors[0]}
        stroke-width={props.strokeWidth}
        stroke-linecap={props.strokeLinecap}
        stroke-linejoin={props.strokeLinejoin}
      />
    </svg>
  )
}

export const Bug = (props: ISvgIconProps) => (
  <svg width={props.iconSize} height={props.iconSize} viewBox="0 0 48 48">
    <g
      stroke="none"
      stroke-width={props.strokeWidth}
      fill="none"
      fill-rule="evenodd"
      stroke-linejoin={props.strokeLinejoin}
    >
      <g
        transform="translate(4.000000, 4.000000)"
        stroke-width={props.strokeWidth}
      >
        <path
          d="M20,38 C32,38 34,27.5323633 34,24 C34,20.837862 34,16.1711953 34,10 L6,10 C6,13.442296 6,18.1089627 6,24 C6,27.450596 8,38 20,38 Z"
          stroke={props.colors[0]}
          fill={props.colors[1]}
          fill-rule="nonzero"
        />
        <path
          d="M3.55271368e-15,4 L6,10"
          stroke={props.colors[0]}
          stroke-linecap={props.strokeLinecap}
        />
        <path
          d="M40,4 L34,10"
          stroke={props.colors[0]}
          stroke-linecap={props.strokeLinecap}
        />
        <path
          d="M0,23 L6,23"
          stroke={props.colors[0]}
          stroke-linecap={props.strokeLinecap}
        />
        <path
          d="M40,23 L34,23"
          stroke={props.colors[0]}
          stroke-linecap={props.strokeLinecap}
        />
        <path
          d="M3,40 L9,34"
          stroke={props.colors[0]}
          stroke-linecap={props.strokeLinecap}
        />
        <path
          d="M37,40 L31,34"
          stroke={props.colors[0]}
          stroke-linecap={props.strokeLinecap}
        />
        <path
          d="M20,38 L20,10"
          stroke={props.colors[2]}
          stroke-linecap={props.strokeLinecap}
        />
        <path
          d="M10.920475,35.0408965 C13.002464,36.7831828 15.9245088,38 20,38 L20,38 C24.1112534,38 27.0487287,36.7713317 29.1341392,35.0138386"
          stroke={props.colors[0]}
          stroke-linecap={props.strokeLinecap}
        />
        <path
          d="M28,8.33333333 C28,3.73096042 24.418278,0 20,0 C15.581722,0 12,3.73096042 12,8.33333333 L12,10 L28,10 L28,8.33333333 Z"
          stroke={props.colors[0]}
          fill={props.colors[1]}
          fill-rule="nonzero"
        />
      </g>
    </g>
  </svg>
)
